<template>
  <el-menu
    :default-active="'/usermanagement'"
    router
    mode="horizontal"
    text-color="black"
    active-text-color="white"
    class="lastnav"
    
    
    position="relative"
    v-if="falg"
  >
    <el-menu-item
      v-for="(item, i) in navList"
      :key="i"
      :index="item.name"
      style="color: #1078d1d6; font-size: 17px"
    >
      {{ item.navItem }}
    </el-menu-item>

    <a
      href="#nowhere"
      @click="(drawer = true), getcover(), getvip()"
      type="primary"
      style="color: #0e73d1e7; float: right; padding: 20px"
      ><el-icon ><Setting style="color: #0e73d1e7;" /></el-icon
    ></a>
    <i
      class="el-icon-menu"
      style="float: right; font-size: 45px; color: #0e73d1e7; padding-top: 8px"
    ></i>

    <el-drawer
      title-text-color="white"
      :direction="direction"
      :before-close="handleClose"
      v-model="drawer"
      class="rtl"
      style="background-color: #0b4378; color: white"
      size="17%"
    >
      <h3 style="color: white; margin-top: -10%; margin-bottom: 7%">
        个人设置
      </h3>
      <a href="">
        <img
          src="../../assets/vip.png"
          alt=""
          style="width: 19px; margin-left: 59%; margin-top: 0%; display: none"
          id="vip"
      /></a>
      <a href="">
        <img
          src="../../assets/novip1.png"
          alt=""
          style="width: 19px; margin-left: 59%; margin-top: 0%; display: none"
          ref="novip"
      /></a>
      <div @click="changecover">
        <span>
          <el-avatar :src="cover" @click="getusername" :size="65"></el-avatar>
        </span>
      </div>
      <chang-cover
        ref="changecover"
        @getchangecover="getchangecover"
      ></chang-cover>
      <div @click="reusername">
        <p style="color: white">{{ username }}</p>
      </div>

      <!-- <div>
          <el-button type="primary" round @click="changpassword">修改用户名</el-button>
        </div> -->
      <div>
        <span>声音</span
        ><el-switch v-model="value1" style="color: white"> </el-switch>
      </div>
      <div>
        <el-button
          type="primary"
          class="xiugaimima"
          plain
          @click="changpassword"
          >修改密码</el-button
        >
      </div>
      <div>
        <el-button type="primary" class="tuichudenglu" plain v-on:click="finish"
          >退出登录</el-button
        >
      </div>

      <div>
        <el-button
          type="primary"
          class="zhuxiaozhanghao"
          plain
          v-on:click="logout"
          >注销账号</el-button
        >
      </div>
      <div>
        <el-button
          type="primary"
          style="background-color: #3d6d05; color: white"
          plain
          v-on:click="kefu"
          >客服</el-button
        >
      </div>

      <div class="pingjia">
        <span class="demonstration">感谢支持,来评价一下我们吧！</span>
        <el-rate v-model="value2" :colors="colors" show-text> </el-rate>
      </div>
    </el-drawer>
    <h1
      style="
        position: absolute;
        padding-top: 20px;
        /* right: 43%; */
        font-size: 20px;
        font-weight: bold;
        color: aliceblue;
        margin-top: -7.5%;
        margin-left: 4%;
      "
      class="Navtitle"
    >
      Lcz - Your Mind Palace
    </h1>
    <ResueName ref="reu"></ResueName>
    <Recover ref="rec"></Recover>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      firstindex: false,
      secondindex: false,
      falg: false,
      navList: [
        { name: "/usermanagement", navItem: "用户管理" },
        { name: "/booksmanagement", navItem: "图书库管理" },
        { name: "/ordermanagement", navItem: "订单处理" },
        { name: "/lastpersonalpage", navItem: "个人中心" },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    firstindex() {
      this.firstindex = true;
    },
  },
  created() {
    this.busdata = sessionStorage.getItem("busdata");
    console.log("nav this.busdata" + this.busdata);
    console.log(this.busdata == 200);
    if (this.busdata == 200) {
      this.falg = false;
    } else if (this.busdata == 201) {
      this.falg = true;
    }
    console.log(this.falg);
  },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  border-color: #005df99c;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid rgba(14, 164, 194, 0.612);
  color: #fdf7f7 !important;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color: var(--el-menu-hover-text-color);
  background-color: #a1bf39;
}

.el-menu-item.is-active {
      background-color: #1078d1d6 !important;
      color: #fff;
      
}
.el-menu-item:hover{
  background-color: #0e73d1e7 !important;
  color: white !important;
}
.el-menu.lastnav{
  width: 100%;
  position: relative;
  /* margin-top: 0.1%; */
  /* margin-top: 8px; */
  height: 12%;
  margin-left: 0px;
  background-image: url(/src/assets/780.jpg);
  display: block;
  margin: 0%;
  padding: 0%;
}
</style>
